﻿@using DiarySocial
@model DiarySocial.ViewModels.Profile.ProfileVM

@{
    ViewBag.Title = "Profile";
}
<section class="vbox">
    <section class="scrollable wrapper">
        <div role="tabpanel">
            <div class="row">
                <div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-1 clear-padding">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
                        <li role="presentation"><a href="#friends" aria-controls="friends" role="tab" data-toggle="tab">Friends</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="about" data-bind="template: { name: aboutTabMode, data: $data }"></div>
                        <div role="tabpanel" class="tab-pane" id="friends" data-bind="template: { name: friendTabMode, data: $data }"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
@section scripts {
    @* Tab loading *@
    <script type="text/html" id="tab-loading">
        <p class="text-center">Loading <i class="fa fa-spin fa-spinner"></i></p>
    </script>
    @* Display about tab *@
    <script type="text/html" id="tab-about">
        <div class="row">
            <aside class="col-xs-12 col-md-6 col-lg-4 tab-aside">
                <section class="panel panel-default">
                    <div class="panel-body">
                        <div class="clearfix text-center m-t">
                            <div class="inline">
                                <div class="easypiechart easyPieChart" data-percent="100" data-line-width="5" data-bar-color="#4cc0c1" data-track-color="#f5f5f5" data-scale-color="false" data-size="134" data-line-cap="butt" data-animate="1000" style="width: 134px; height: 134px; line-height: 134px;">
                                    <div class="thumb-lg">
                                        <img class="img-circle" data-bind="attr: {src: about.avatar, alt: about.displayName}">
                                    </div>
                                    <canvas width="134" height="134"></canvas>
                                </div>
                                <div class="h4 m-t m-b-xs" data-bind="text: about.displayName"></div>
                                <small class="text-muted m-b" data-bind="text: about.description"></small>
                            </div>
                        </div>
                    </div>
                    <footer class="panel-footer bg-info text-center">
                        <div class="row pull-out">
                            <div class="col-xs-4">
                                <div class="padder-v">
                                    <span class="m-b-xs h3 block text-white">245</span>
                                    <small class="text-muted">Followers</small>
                                </div>
                            </div>
                            <div class="col-xs-4 dk">
                                <div class="padder-v">
                                    <span class="m-b-xs h3 block text-white">55</span>
                                    <small class="text-muted">Following</small>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="padder-v">
                                    <span class="m-b-xs h3 block text-white">2,035</span>
                                    <small class="text-muted">Tweets</small>
                                </div>
                            </div>
                        </div>
                    </footer>
                </section>
            </aside>
            <aside class="col-xs-12 col-md-6 col-lg-8 tab-aside">
                <section class="panel panel-default">
                    <div class="panel-body">
                        <dl class="dl-horizontal">
                            <dt>Name</dt>
                            <dd data-bind="text: about.displayName"></dd>
                            <dt>Account</dt>
                            <dd data-bind="text: about.account"></dd>
                            <dt>Email</dt>
                            <dd data-bind="text: about.email"></dd>
                            <dt>Job</dt>
                            <dd data-bind="text: about.job"></dd>
                            <dt>School</dt>
                            <dd data-bind="text: about.school"></dd>
                            <dt>Address</dt>
                            <dd data-bind="text: about.address"></dd>
                            <dt>Introduce</dt>
                            <dd data-bind="text: about.introduce"></dd>
                        </dl>
                        <!-- ko if: owner -->
                        <div class="pull-right"><button class="btn btn-sm btn-icon btn-default" data-bind="click: EditAbout"><i class="fa fa-edit"></i></button></div>
                        <!-- /ko-->
                    </div>
                </section>
            </aside>
        </div>
    </script>
    @* Update about tab *@
    <script type="text/html" id="tab-about-edit">
        <div class="row">
            <aside class="col-xs-12 col-md-6 col-lg-4 tab-aside">
                <section class="panel panel-default">
                    <div class="panel-body">
                        <div class="clearfix text-center m-t">
                            <div class="inline">
                                <div class="easypiechart easyPieChart" data-percent="100" data-line-width="5" data-bar-color="#4cc0c1" data-track-color="#f5f5f5" data-scale-color="false" data-size="134" data-line-cap="butt" data-animate="1000" style="width: 134px; height: 134px; line-height: 134px;">
                                    <div class="thumb-lg">
                                        <img class="img-circle" data-bind="attr: {src: about.avatar, alt: about.displayName}">
                                    </div>
                                    <canvas width="134" height="134"></canvas>
                                </div>
                                <div class="h4 m-t m-b-xs" data-bind="text: about.displayName"></div>
                                <small class="text-muted m-b" data-bind="text: about.description"></small>
                            </div>
                            <div class="col-sm-12">
                                <form class="form-inline" role="form">
                                    <input data-bind="event: {change: ChangeAvatar}" type="file" class="filestyle" accept="image/gif, image/jpeg, image/png" data-url="@Url.Action("ChangeAvatar", "Diary")">
                                    <button data-bind="click: RemoveAvatar" class="btn btn-default btn-xs btn-icon inline"><i class="fa fa-trash"></i></button>
                                    <span id="uploading">0</span>
                                </form>
                            </div>
                        </div>
                    </div>
                    <footer class="panel-footer bg-info text-center">
                        <div class="row pull-out">
                            <div class="col-xs-4">
                                <div class="padder-v">
                                    <span class="m-b-xs h3 block text-white">245</span>
                                    <small class="text-muted">Followers</small>
                                </div>
                            </div>
                            <div class="col-xs-4 dk">
                                <div class="padder-v">
                                    <span class="m-b-xs h3 block text-white">55</span>
                                    <small class="text-muted">Following</small>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="padder-v">
                                    <span class="m-b-xs h3 block text-white">2,035</span>
                                    <small class="text-muted">Tweets</small>
                                </div>
                            </div>
                        </div>
                    </footer>
                </section>
            </aside>
            <aside class="col-xs-12 col-md-6 col-lg-8 tab-aside">
                <form class="form-horizontal" action="@Url.Action("UpdateAbout")" data-bind="submit: UpdateAbout" data-validate="parsley">
                    <section class="panel panel-default">
                        <header class="panel-heading font-bold">Edit Profile</header>
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Full Name</label>
                                <div class="col-lg-10">
                                    <input data-bind="value: about.displayName" type="text" class="form-control parsley-validated" placeholder="Full Name" data-required="true" data-maxwords="30">
                                    <span class="help-block m-b-none">Please enter your full name</span>
                                </div>
                                <label class="col-lg-2 control-label">Email</label>
                                <div class="col-lg-10">
                                    <input data-bind="value: about.email" type="email" class="form-control parsley-validated" placeholder="Email" data-required="true">
                                    <span class="help-block m-b-none">Please enter your email</span>
                                </div>
                                <label class="col-lg-2 control-label">Job</label>
                                <div class="col-lg-10">
                                    <input data-bind="value: about.job" type="text" class="form-control parsley-validated" placeholder="Job" data-maxwords="255">
                                    <span class="help-block m-b-none">Please enter your job</span>
                                </div>
                                <label class="col-lg-2 control-label">School</label>
                                <div class="col-lg-10">
                                    <input data-bind="value: about.school" type="text" class="form-control parsley-validated" placeholder="School" data-maxwords="255">
                                    <span class="help-block m-b-none">Please enter your school</span>
                                </div>
                                <label class="col-lg-2 control-label">Address</label>
                                <div class="col-lg-10">
                                    <input data-bind="value: about.address" type="text" class="form-control parsley-validated" placeholder="Address" data-maxwords="255">
                                    <span class="help-block m-b-none">Please enter your address</span>
                                </div>
                                <label class="col-lg-2 control-label">Introduce</label>
                                <div class="col-lg-10">
                                    <textarea data-bind="value: about.introduce" class="form-control parsley-validated" rows="6" placeholder="Type your message" data-maxwords="3000"></textarea>
                                    <span class="help-block m-b-none">Please introduce something about you</span>
                                </div>
                            </div>
                            <footer class="pull-right">
                                <button type="submit" class="btn btn-success">Save</button>
                                <i class="fa fa-spin fa-spinner hide" id="spin-save-about"></i>
                            </footer>
                        </div>
                    </section>
                </form>
            </aside>
        </div>
    </script>
    @* friend item template *@
    <script type="text/html" id="friend">
        <section class="col-xs-6 col-sm-6 col-md-6 col-lg-6 friend-item clear-padding">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="clearfix">
                        <a class="pull-left thumb avatar m-r" data-bind="attr: {href: profileUrl}">
                            <img data-bind="attr: {src: avatar, alt: displayName}">
                        </a>
                        <div class="clear friend-info">
                            <a class="m-t-xs m-b-xs h4 block" data-bind="text: displayName, attr: {href: profileUrl}"></a>
                            <!-- ko if: $root.owner() -->
                            <a href="#" class="btn btn-rounded btn-xs btn-icon btn-default pull-right action unfriend-action" data-bind="click: $root.Unfriend"><i class="fa fa-close"></i></a>
                            <!-- /ko -->
                            <div class="help-block" data-bind="text: description"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </script>
    <script type="text/html" id="suggest-friend">
        <section class="friend-item clear-padding">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="clearfix">
                        <a class="pull-left thumb avatar m-r" data-bind="attr: {href: profileUrl}">
                            <img data-bind="attr: {src: avatar, alt: displayName}">
                        </a>
                        <div class="clear friend-info">
                            <a class="m-t-xs m-b-xs h4 block" data-bind="text: displayName, attr: {href: profileUrl}"></a>
                            <a href="#" class="btn btn-rounded btn-xs btn-icon btn-default pull-right action add-action" data-bind="click: $root.SendFriendRequest"><i class="fa fa-plus"></i></a>
                            <div class="help-block" data-bind="text: description"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </script>
    <script type="text/html" id="request-friend">
        <section class="friend-item clear-padding">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="clearfix">
                        <a class="pull-left thumb avatar m-r" data-bind="attr: {href: profileUrl}">
                            <img data-bind="attr: {src: avatar, alt: displayName}">
                        </a>
                        <div class="clear friend-info">
                            <a class="m-t-xs m-b-xs h4 block" data-bind="text: displayName, attr: {href: profileUrl}"></a>
                            <a href="#" class="btn btn-rounded btn-xs btn-icon btn-default pull-right action delete-action" data-bind="click: $root.RefuseFriendRequest"><i class="fa fa-close"></i></a>
                            <a href="#" class="btn btn-rounded btn-xs btn-icon btn-default pull-right action confirm-action" data-bind="click: $root.ConfirmFriendRequest"><i class=" fa fa-check"></i></a>
                            <div class="help-block" data-bind="text: description"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </script>
    @* display friend tab *@
    <script type="text/html" id="tab-friend">
        <div class="row">
            <aside class="col-xs-12 col-md-8 tab-aside" data-bind="foreach: friends.allFriends">
                <!-- ko template: { name: friendMode, data: $data } -->
                <!-- /ko-->
            </aside>
            <aside class="col-md-4 hidden-sm hidden-xs tab-aside aside-widgets friend-widgets">
                <section class="widget">
                    <header class="widget-header bg-primary">
                        Suggest friends
                    </header>
                    <div class="widget-body" data-bind="foreach: friends.suggestedFriends">
                        <!-- ko template: { name: friendMode, data: $data } -->
                        <!-- /ko-->
                    </div>
                </section>
                <!-- ko if: owner() -->
                <section class="widget">
                    <header class="widget-header bg-primary">
                        Friend requests
                    </header>
                    <div class="widget-body" data-bind="foreach: friends.requestedFriends">
                        <!-- ko template: { name: friendMode, data: $data } -->
                        <!-- /ko-->
                    </div>
                </section>
                <!-- /ko -->
            </aside>
        </div>
    </script>
    <script src="~/Scripts/file-input/bootstrap-filestyle.min.js"></script>
    <script src="~/Scripts/charts/easypiechart/jquery.easy-pie-chart.js"></script>
    <script type="text/javascript">
        var data = @JavaScriptConvert.SerializeObject(Model);
    </script>
    <script src="~/Scripts/profile.js"></script>
}
